

<template>
  <div class="search-div">
    <el-button type="success" size="small" @click="addShow,dialogVisible=true" >添 加</el-button>
  </div>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
    <el-form label-width="120px">
      <el-form-item label="菜单标题">
        <el-input v-model="sysMenu.title"/>
      </el-form-item>
      <el-form-item label="路由名称">
        <el-input v-model="sysMenu.component"/>
      </el-form-item>
      <el-form-item label="排序" >
        <el-input v-model="sysMenu.sortValue"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="sysMenu.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <div>
    <el-table
        :data="sysMenuTree"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
    >
      <el-table-column prop="title" label="菜单标题" sortable />
      <el-table-column prop="component" label="路由名称" sortable />
      <el-table-column prop="sortValue" label="排序" sortable />
      <el-table-column prop="status" label="状态" sortable #default="scope">
          {{scope.row.status ==1?"正常":"停用"}}

      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable />
      <el-table-column label="操作" sortable  #default="scope" >
        <el-button type="success" size="small" @click="addShow(scope.row),dialogVisible=true">添加下级节点</el-button>
        <el-button type="primary" size="small" @click="editShow(scope.row)">修改</el-button>
        <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
      </el-table-column>/
    </el-table>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {findSysMenuTree,addMenu,deleteMenu,updateMenu} from "@/api/sysMenu";
import {ElMessage} from "element-plus";

// 定义添加表单菜单表单相关数据模型
const dialogTitle = ref('添加')
const dialogVisible = ref(false)
const sysMenu = ref({
  id: '',
  parentId: 0,
  title: '',
  url: '',
  component: '',
  icon: '',
  sortValue: 1,
  status: 1,
})
const sysMenuTree  = ref([])
//刷新列表
const fetchMenu = ()=>{
  findSysMenuTree().then((res)=>{
    sysMenuTree.value = res.data;
  })
}
//添加菜单
const saveOrUpdate = ()=>{
  if (sysMenu.value.id == undefined){
    //新增
    addMenu(sysMenu.value).then(res=>{
      ElMessage.success(res.message);
      dialogVisible.value = false
      fetchMenu()
    })
  }else {
    //修改
    updateMenu(sysMenu.value).then(res=>{
      ElMessage.success(res.message);
      dialogVisible.value = false
      fetchMenu()

    })


  }

}
const addShow = (row)=>{
  sysMenu.value = {}
  if (!row.id){
    //添加根节点
    sysMenu.value.parentId = 0;
    dialogTitle.value = "添加"
  }else {
    dialogTitle.value = "添加子节点"
    sysMenu.value.parentId = row.id;
  }
}
//删除菜单
const remove = (row)=>{

  deleteMenu(row).then(res=>{
    if (res.code == 200){ElMessage.success(res.message);
      fetchMenu()}else {
      ElMessage.error(res.message);
    }
  })
}
//修改
const editShow = (row)=>{
  sysMenu.value = row;
  dialogVisible.value = true
}
onMounted(()=>{
  fetchMenu()

})
</script>
<style scoped lang="scss">
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>